<script setup lang="ts">
import { Close } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import DisasterDetailWindow from '@/components/DisasterDetailWindow.vue';

const props = defineProps({
  disaster: {
    type: Object,
    required: true
  }
});

defineEmits(['close']);

// 灾害类型映射表
const hazardTypeMap = {
  'landslid': '山体滑坡',
  'roadflooding': '内涝',
  'waterbody': '水体',
  'road_collapse': '路面塌陷',
  'road_frozing': '路面结冰'
};

// 获取灾害类型的中文名称
const getDisasterTypeName = (type) => {
  console.log('映射名称', type, hazardTypeMap[type])
  return hazardTypeMap[type] || type;
};

// 根据灾害类型获取标签类型
const getTagType = (type) => {
  switch (type) {
    case 'landslid':
      return 'danger';
    case 'roadflooding':
      return 'warning';
    case 'waterbody':
      return 'info';
    case 'road_collapse':
      return 'error';
    case 'road_frozing':
      return 'success';
    default:
      return '';
  }
};

// 根据灾害等级获取标签类型
const getTagTypeByLevel = (level) => {
  switch (level) {
    case '严重':
      return 'danger';
    case '中等':
      return 'warning';
    case '轻微':
      return 'info';
    default:
      return '';
  }
};

// 报告灾情
const reportDisaster = () => {
  ElMessage.success('已提交灾情报告');
};

// 查看详情
const viewDetails = () => {
  ElMessage.info('查看灾害详情功能正在开发中');
};
</script>

<template>
  <div class="disaster-info-window">
    <DisasterDetailWindow 
      :disaster="disaster"
      :disasterTypeName="getDisasterTypeName(disaster.disasterType)"
      :tagType="getTagType(disaster.disasterType)"
      @close="$emit('close')" 
    />
  </div>
</template>

<style scoped lang="less">
.disaster-info-window {
  min-width: 350px;
  max-width: 400px; 
}
</style>